<template>
  <div id="app">
    <div class="container-subject">
      <el-row>
        <el-col :span="24" class="blog-container">
          <!--左侧博文部分-->
          <el-col :span="18">
            <!--博文列表组件-->
            <div class="blog-left">
              <article v-for="(news, index) in startupNewsList" :key="index">
                <h4>
                  <a href="details" target="_blank">{{ news.title }}</a>
                </h4>
                <div class="article-title">
                  <div class="article-text">{{ news.summay }}</div>
                  <div class="article-timer">
                    <span>{{ news.catalog }}&nbsp;</span
                    ><i class="el-icon-date"></i
                    ><span>{{ news.createTime }}</span>
                    <span
                      ><i class="el-icon-view"></i> {{ news.browseNumber }}
                    </span>
                  </div>
                </div>
              </article>

              <br />
              <div style="text-align: center">
                <!-- 分页 -->
                <el-pagination
                  :current-page="page"
                  :page-size="limit"
                  :total="total"
                  style="padding: 30px 0; text-align: center"
                  layout="total, prev, pager, next, jumper"
                  @current-change="getList"
                />
              </div>
              <br />
            </div>
          </el-col>
          <!--右侧广告部分-->
          <el-col :span="6">
            <!--博文页面右侧组件-->
            <div class="blog-right">
              <div class="blog-aboutme">
                <div class="blog-unit-title">
                  <i class="el-icon-edit-outline"></i>关于平台
                </div>
                <hr />
                <div class="blog-unit-content">
                  全国大学生创业平台，是北京学佳澳教育集团专门宣传、鼓励、引导、帮助大学生创业的定制网站。
                </div>
              </div>
              <div>
                <div class="blog-adv">广告占位300x600</div>
              </div>
              <div>
                <div class="blog-unit-title">
                  <i class="el-icon-s-data"></i>热门文章
                </div>
                <hr />
                <div class="blog-unit-hot">
                  <li><a href="#" title="热门文章1">热门文章1</a></li>
                  <li><a href="#" title="热门文章2">热门文章2</a></li>
                  <li><a href="#" title="热门文章3">热门文章3</a></li>
                  <li><a href="#" title="热门文章4">热门文章4</a></li>
                  <li><a href="#" title="热门文章5">热门文章5</a></li>
                  <li><a href="#" title="热门文章6">热门文章6</a></li>
                  <li><a href="#" title="热门文章7">热门文章7</a></li>
                  <li><a href="#" title="热门文章8">热门文章8</a></li>
                </div>
                <br />
              </div>
              <div>
                <div class="blog-unit-title">
                  <i class="el-icon-share"></i>友情链接
                </div>
                <hr />
                <div class="blog-unit-friend">
                  <li class="col-md-6"><a href="#">成都理工大学</a></li>
                  <li class="col-md-6"><a href="#">四川师范大学</a></li>
                  <li class="col-md-6"><a href="#">成都信息工程大学</a></li>
                </div>
              </div>
            </div>
          </el-col>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import newsApi from "@/api/news";
export default {
  data() {
    return {
      // 查询之后接口返回集合
      startupNewsList: null,
      page: 1,
      limit: 5,
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList(page = 1) {
      this.page = page;
      newsApi.getPageNews(this.page, this.limit).then((response) => {
        console.log(response.data);
        this.startupNewsList = response.data.records;
        this.total = response.data.total;
      });
    },
  },
};
</script>
<style>
    /*总布局样式表*/
    .container {
        width: 100%;
        background-color: #fafafa;
    }

    .container-subject {
        width: 80%;
        background-color: #fafafa;
        margin: 0px auto;

    }

    .blog-container {
        width: 100%;
        margin: 0px;
        display: flex;
        padding: 10px;
        align-content: space-around;
    }

    /*以下创业动态列表左侧部分样式表*/
    .blog-left {
        width: 98%;
        height: 98%;
        margin: 10px 0px 10px 0px;
        padding: 10px 0px 10px 0px;
        background: #FFF;
    }

    .article-title {
        width: 98%;
        display: flex;
        justify-content: space-around;
        margin: 8px 0 8px 0;
    }

    .article-text {
        width: 65%;
        height: 18px;
        padding-right: 20px;
        text-indent: 2em;
        text-align: left;
        color: #444444;
        font-size: small;
        overflow: hidden;
    }

    article {
        width: 100%;
        border-bottom: 1px dotted #BBB;
    }

    .article-timer {
        width: 35%;
        text-align: right;
        color: #ccc;
        font-size: small;
    }

    .article-pager {
        margin-top: 20px;
        width: 100%;
        text-align: center;
    }

    article h4 {
        margin-left: 20px;
    }

    article h4 a {
        color: #336699;;
        text-decoration: underline;
    }

    /*右侧部分样式表*/
    .blog-right {
        width: 100%;
        height: 98%;
        padding: 10px 0px 10px 0px;
        margin: 10px 0px 10px 0px;
        background: #FFF;

    }

    .blog-aboutme {
        margin: 10px;
        border: 1px solid #EEE;
        border-radius: 5px;
        padding: 20px 5px 20px 5px;
    }

    .blog-unit-content {
        color: #666666;
        text-indent: 2em;
        font-size: small;
    }

    .blog-adv {
        text-align: center;
        margin: 10px;
        border: 1px solid #EEE;
        border-radius: 5px;
        padding: 20px 5px 20px 5px;
        height: 300px;
        line-height: 300px;
        color: #ccc;
    }

    .blog-unit-title {
        font-size: larger;
    }

    .blog-unit-title {
        text-align: center;
    }

    .blog-unit-hot, .blog-unit-friend {
        text-align: center;
    }

    .blog-unit-hot li, .blog-unit-friend li {
        list-style: none;

    }

    .blog-unit-hot a, .blog-unit-friend a {
        text-decoration: none;
        color: #336699;
    }

</style>